/**
 * 注册框
 */
import React from 'react'
import './SignUpBox.scss';

export default class SignUpBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    /**
     * 设置各项表单元素的值
     */
    setFormValue = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    submitSignUpInfo = (e) => {
        e.preventDefault();
        // 将表单数据转换为查询参数格式
        const params = new URLSearchParams();
        params.append('account', this.state.account);
        params.append('nickname', this.state.nickname);
        params.append('adminPwd', this.state.adminPwd);
        params.append('tel', this.state.tel);

        // 请求注册接口
        React.axios.post(`/store-manage/gw1901/admin_sign-up.php`, params).then(res => {
            // 如果包含登录成功的文本，则跳转到管理首页
            if(res.data.includes("管理员账号注册成功")) {
                // 提示服务器返回信息
                alert(res.data);
                // 请求获取用户名的接口
                React.axios.get(`/store-manage/gw1901/admin_nickname.php?account=${this.state.account}`).then(res => {
                    // 通过会话存储设置昵称
                    sessionStorage.setItem('nickname', res.data);
                    // 执行跳转到管理首页的方法
                    this.props.goManagePage();
                });
                
            } 
            // 提示服务器返回的错误
            else {
                alert(res.data);
            }
        })
    }

    //渲染界面
    render() {
        return (
            <div className="container2">
            {/* 注册内容 */}
                <div className="logupBox">
                    <h1>侠客花名册</h1>
                    <form 
                        autoComplete="off"
                        onSubmit={this.submitSignUpInfo}
                    >
                        <div>
                            <label>编号：</label>
                            <input 
                                name="account" 
                                type="text" 
                                placeholder="请输入编号" 
                                onChange={this.setFormValue} 
                            />
                        </div>
                        <div>
                            <label>绰号：</label>
                            <input 
                                name="nickname" 
                                type="text" 
                                placeholder="请输入绰号" 
                                onChange={this.setFormValue}  
                            />
                        </div>
                        <div>
                            <label>千里传音：</label>
                            <input 
                                name="tel" 
                                type="text" 
                                placeholder="请输入千里传音" 
                                onChange={this.setFormValue}  
                            />
                        </div>
                        <div>
                            <label>指令：</label>
                            <input 
                                name="adminPwd" 
                                type="password" 
                                placeholder="请输入指令" 
                                onChange={this.setFormValue}  
                            />
                        </div>
                        <div>
                            <label>确认指令：</label>
                            <input 
                                name="reAdminPwd" 
                                type="password" 
                                placeholder="请再次输入指令" 
                                onChange={this.setFormValue}  
                            />
                        </div>
                        <div className="switchLogin">
                            <p>已经拥有名号？前往<span onClick={() => {
                                this.props.switchLoginBox()
                            }}>泰山之巅</span>页面。</p>
                        </div>
                        <div>
                            <button type="submit">进入江湖</button>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}